<template>
	<el-row :gutter="10">
		
		
	    <el-col :xs="12" :sm="4" :md="4" :lg="3" :xl="3">
			<div class="grid-content first-content">
				
				<el-dropdown>
				    <span class="el-dropdown-link">
						<img  src="../../assets/img/展开.svg" >
				    </span>
				    <template #dropdown>
				      <el-dropdown-menu>
				        <el-dropdown-item @click="clickMenu('/data_statistic','data_statistic')">数据统计</el-dropdown-item>
				        <el-dropdown-item @click="clickMenu('/data_entry','data_entry')">详细数据</el-dropdown-item>
						<el-dropdown-item @click="clickMenu('/wages','wages')">员工薪资</el-dropdown-item>
				        <el-dropdown-item @click="clickMenu('/data_analysis','data_analysis')">数据分析</el-dropdown-item>
						
						<el-dropdown-item @click="clickMenu('/Industrys_trend','Industrys_trend')">行业趋势</el-dropdown-item>
						<el-dropdown-item  @click="clickMenu('/settings','settings')">用户设置</el-dropdown-item>
				      </el-dropdown-menu>
				    </template>
				  </el-dropdown>
			</div>
		</el-col>
	    	
		<el-col :xs="4" :sm="13" :md="15" :lg="17" :xl="18">
			<div class="grid-content"></div>			
			</el-col>
	    
		<el-col :xs="8" :sm="7" :md="5" :lg="4" :xl="3">
			<div class="grid-content last-content">
				<img class="imgradius" :src="imgSrc" >
				 <el-dropdown trigger="hover">
				    <span class="el-dropdown-link">
				      <span class="name">
							{{ userName }}
					  </span>					  
				      <el-icon class="el-icon--right">
				        <arrow-down />
				      </el-icon>
				    </span>
				    <template #dropdown>
				      <el-dropdown-menu>
				        <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
				      </el-dropdown-menu>
				    </template>
				  </el-dropdown>
				<!-- <span>王星元</span> -->
			</div>
		</el-col>
	  
	  </el-row>
</template>

<script setup>
	import { ArrowDown } from '@element-plus/icons-vue'
	import router from "../../router/index.js";
	import {getUserName} from "../../http/header.js";
	import { ref } from 'vue'	
	
	//登录人员姓名
	let userName = ref("")
	let imgSrc = ref("")
	getUserName().then(res=>{
		userName.value = res.data.userName
		imgSrc.value = res.data.img
	})
		
	function clickMenu(url,name){
		router.push({
			name:name,
			url:url
		})
	}
	function logOut(){
		window.sessionStorage.removeItem("access-admin")
		router.go(0)
	}
	
</script>

<style scoped="scoped">
	.el-row{
		height: 100%;
	}
	.el-col {
		height: 100%;
	}
	.first-content img{
		height: 0.9375rem;
		width: 0.9375rem;
		margin-top: 1.5625rem;
		display: none;	
	}
	.imgradius{
		border-radius: 100%;
	}
	.bg-purple-dark {
	  background: #99a9bf;
	}
	.bg-purple {
	  background: #d3dce6;
	}
	.bg-purple-light {
	  background: #e5e9f2;
	}
	.grid-content {
		min-height: 36px;
	}
	.last-content{
		height: 100%;
		border-left:0.0625rem #e6e6e6 solid ;
		border-right:0.0625rem #e6e6e6 solid ;
		background-color: #f9f9fb;
	}
	.last-content img{
		float: left;
		width: 3.125rem;
		height: 3.125rem;
		margin-top: 0.3125rem;
	}
	.last-content span{
		float: left;
		height: 100%;
		line-height: 3.8875rem;
		font-size: 1rem;
		margin-left:0.5rem ;
		font-weight: 500;		
	}
	.last-content span:hover{
		color: #66B1FF;
	}
	@media screen and (max-width: 641px) {
		.first-content img{
			display: block;
		}
	}
	@media screen and (max-width: 771px) {
		.name{
			display: none;
			}	
	}
</style>
